// 智能客服
const host = window.location.hostname
let port = window.location.port
if (port.length === 0) {
    port = 80
}

const link = "ws://" + host + ":" + (parseInt(port) + 7000).toString()
// 创建WebSocket连接
const socket = new WebSocket(link);
// 监听连接建立事件
socket.onopen = function(event) {};
// 问题和回答

function openChat() {
    document.body.classList.add("hidden-element")
    document.getElementById("smart-chat").style.display = "flex"
}

function closeChat() {
    document.body.classList.remove("hidden-element")
    document.getElementById("smart-chat").style.display = "none"
}

let rid = 0
function sendMsg() {
    if (socket.readyState === 1) {
        const value = document.getElementById("chat-input").value
        if (value.length <= 0) {
            AddMessage("warning", "请输入问题")
            return
        }
        document.getElementById("btn-chat-send").disabled = true
        document.getElementById("icon-send").style.display = "none"
        document.getElementById("loader-chat").style.display = "flex"
        const chatContent = document.getElementById("chat-content")
        const userElement = document.createElement('li');
        const aiElement = document.createElement('li');
        userElement.className = "user-dialogue"
        aiElement.className = "ai-dialogue"
        userElement.innerHTML = `<div class="user-question dialogue">` + value + `</div>`
        aiElement.innerHTML = `<div class="ai-reply dialogue" id="` + "ai-reply" + rid.toString() + `"></div>`
        chatContent.appendChild(userElement)
        chatContent.appendChild(aiElement)
        socket.send(value);
        document.getElementById("chat-input").value = ""
    }else{
        AddMessage("error", "与客服连接断开，请刷新页面")
    }
}

let text = ""
// 监听接收到服务器消息事件
socket.onmessage = function(event) {
    if (event.data.length === 0) {
        return;
    }
    if (event.data === "finish") {
        document.getElementById("btn-chat-send").disabled = false
        document.getElementById("icon-send").style.display = "inline"
        document.getElementById("loader-chat").style.display = "none"
        rid++
        text = ""
        return
    }
    text += event.data
    let Id = "ai-reply" + rid.toString()
    document.getElementById(Id).innerHTML = text
};
// 监听连接关闭事件
socket.onclose = function(event) {
    AddMessage("warning", "与客服连接断开，请刷新页面")
    document.getElementById("btn-chat-send").disabled = true
};

function initChat() {
    let html = `<div class="chat-body" id="chat-body">
        <div class="chat-body-header">
            智能客服
            <button class="btn-chat-close" onclick="closeChat()">
            <svg t="1688093534713" class="icon-chat-close" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2795" width="30" height="30"><path d="M544.448 499.2l284.576-284.576a32 32 0 0 0-45.248-45.248L499.2 453.952 214.624 169.376a32 32 0 0 0-45.248 45.248l284.576 284.576-284.576 284.576a32 32 0 0 0 45.248 45.248l284.576-284.576 284.576 284.576a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0-45.248L544.448 499.2z" fill="#3E3A39" p-id="2796"></path>
            </svg>
            </button>
        </div>
        <div class="chat-body-content">
            <ul id="chat-content">
            </ul>
        </div>
        <div class="chat-body-operate">
            <textarea id="chat-input" maxlength="300" class="chat-input" placeholder="我想问..." style="height: 40px"></textarea>
            <button id="btn-chat-send" onclick="sendMsg()">
            <svg id="icon-send" t="1688094056915" class="icon-send" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3804" width="30" height="30"><path d="M0 0h1024v1024H0z" fill="rgba(0, 0, 0, 0)" p-id="3805"></path><path d="M860.736 80.544l-11.072-30.016 11.072 30.016zM130.592 350.496l-11.104-30.016 11.104 30.016z m-8.928 115.936l15.552-27.936-15.552 27.936z m254.624 141.632l-15.552 27.968 15.552-27.968z m26.4 27.84l-28.768 14.08 28.768-14.08z m140.064 286.592l-28.736 14.08 28.736-14.08z m117.44-5.632l-29.984-11.232 29.984 11.232z m282.688-753.824l29.952 11.2-29.952-11.2z m-93.216-112.512L119.456 320.48l22.208 60.032 730.144-269.984-22.208-60zM106.112 494.4l254.624 141.632 31.104-55.936-254.624-141.6-31.104 55.904z m267.84 155.552l140.064 286.592 57.472-28.096-140.064-286.592-57.504 28.096z m316.16 278.144l282.72-753.824-59.936-22.464L630.208 905.6l59.936 22.464z m-176.096 8.448c36.96 75.68 146.56 70.432 176.128-8.448l-59.936-22.464c-9.856 26.304-46.4 28.032-58.72 2.816l-57.504 28.096z m-153.28-300.48a32 32 0 0 1 13.184 13.888l57.504-28.096a96 96 0 0 0-39.584-41.76l-31.104 55.936z m-241.248-315.584c-76.96 28.448-85.056 134.08-13.376 173.92l31.104-55.904a32 32 0 0 1 4.48-57.984l-22.208-60.032z m752.352-209.92a32 32 0 0 1 41.056 41.248l59.936 22.464c28.864-76.992-46.08-152.256-123.2-123.744l22.208 60zM406.272 646.944l544-528-44.576-45.952-544 528 44.576 45.952z"  p-id="3806"></path>
            </svg>
            <div class="loader-chat" id="loader-chat">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
            </button>
        </div>
    </div>`

    // 创建新的子节点
    const newElement = document.createElement('div');
    newElement.className = "smart-chat"
    newElement.id = "smart-chat"
    newElement.innerHTML = html
    const openElement = document.createElement('div');
    openElement.className = "smart-chat-open"
    openElement.onclick = openChat
    openElement.title = "智能客服"
    openElement.innerHTML = `<svg t="1688109151369" style="width: 60%; height: 60%" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2963" width="40" height="40"><path d="M192 608l-192 192V0h800v608H192z m160-384H192v160h160V224z m256 0h-160v160h160V224z" fill="#2394FB" p-id="2964"></path><path d="M896 704V256h128v768l-199.072-192H288v-128h608z" fill="#A7D4FD" p-id="2965"></path></svg>`
    // 获取body元素
    const body = document.body;
    // 将子节点添加到body
    body.appendChild(newElement);
    body.appendChild(openElement)
    // 获取 textarea 元素
    const textarea = document.getElementById('chat-input');
    // 监听 textarea 的输入事件
    textarea.addEventListener('input', function() {
        // 调整 textarea 的高度
        textarea.style.height = '40px'; // 先将高度设置为 auto，以便重新计算高度
        textarea.style.height = textarea.scrollHeight + 'px'; // 设置为内容的实际高度
    });
    const chatContent = document.getElementById("chat-content")
    const element = document.createElement('li');
    element.className = "ai-dialogue"
    element.innerHTML = `<div class="ai-reply dialogue" >用户你好，我是您的的专属智能客服，可以为您提供商品信息和选购建议。</div>`
    chatContent.appendChild(element)
}

window.onload = initChat